<template>
  <div class="watch-list bg-white rounded-lg shadow p-4">
    <h2 class="text-xl font-bold mb-4">关注列表</h2>
    <div class="flex flex-wrap gap-2">
      <button
        v-for="stock in watchList"
        :key="stock.symbol"
        @click="selectStock(stock.symbol)"
        class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full hover:bg-blue-200 transition-colors"
      >
        {{ stock.symbol }}
      </button>
      <button
        @click="showMoreStocks"
        class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full hover:bg-gray-200 transition-colors"
      >
        更多...
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const watchList = ref([
  { symbol: '000001', name: '平安银行' },
  { symbol: '600519', name: '贵州茅台' },
  { symbol: '300750', name: '宁德时代' },
  { symbol: '601318', name: '中国平安' },
  { symbol: '600036', name: '招商银行' },
]);

const selectStock = (symbol) => {
  // 跳转到股票详情页
  router.push({ 
    name: 'StockDetail', 
    params: { symbol },
    query: { from: 'watchlist' }
  });
};

const showMoreStocks = () => {
  // 跳转到完整的关注列表页面
  router.push({ name: 'WatchListFull' });
};
</script>